<template>
  <div
    class="scroll-table"
    :style="{ height: height, '--base-border-color': borderColor }"
  >
    <table class="table">
      <tr :style="headerStyle">
        <th
          v-for="(col, index) in column"
          :key="index"
          :style="{
            width: col.width ? col.width : `calc(100% / ${column.length})`,
          }"
        >
          <span>{{ col.label }}</span>
        </th>
      </tr>
    </table>
    <vue3-seamless-scroll
      :list="data"
      :direction="direction"
      :hover="hover"
      :limitScrollNum="1"
      :step="step"
      class="scroll"
    >
      <table class="table">
        <tr v-for="(row, rIndex) in data" :key="rIndex" :style="columnStyle">
          <td
            v-for="(col, index) in column"
            :key="index"
            :style="{
              width: col.width ? col.width : `calc(100% / ${column.length})`,
            }"
          >
            <slot v-if="!!slots[col.prop]" :name="col.prop" :row="row"> </slot>
            <span v-else>{{ row[col.prop] }}</span>
          </td>
        </tr>
      </table>
    </vue3-seamless-scroll>
  </div>
</template>

<script setup lang="ts">
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";

type Props = {
  height?: string;
  data?: any;
  column?:any;
  step?: number;
  hover?: boolean;
  direction?:  "up" | "down" | "left" | "right";
  borderColor?: string;
  headerStyle?: any;
  columnStyle?: any;
};
const props = withDefaults(defineProps<Props>(), {
  height: "300px",
  data: [],
  column: [],
  step: 0.6,
  hover: true,
  direction: "up",
});

const slots = useSlots();
</script>

<style scoped lang="scss">
$border-color: var(--base-border-color);
.scroll {
  margin: 0px auto;
  overflow: hidden;
}

.scroll-table {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .table {
    width: 100%;
    border-collapse: collapse;
    tr {
      border: 1px solid $border-color;
    }
  }
  td,
  th {
    text-align: var(--text-align);
    padding: 5px 10px;
    border: 1px solid $border-color;
  }
}
</style>
